<template>
	<view class="content-box">
		<u-form :model="model" :rules="rules" ref="uForm" :errorType="errorType">
			<u-form-item :label-position="labelPosition" label="身份证正面" prop="photo" label-width="150">
				<u-upload width="160"></u-upload>
			</u-form-item>
			<u-form-item :right-icon="rightIcon" :label-position="labelPosition" label="姓名" prop="name">
				<u-input :border="border" placeholder="请上传身份证照片" v-model="model.name" type="text" clearable></u-input>
			</u-form-item>
			<u-form-item :right-icon="rightIcon" :label-position="labelPosition" label="身份证号码" prop="idCardNo" label-width="170">
				<u-input :border="border" placeholder="请输入身份证号码" v-model="model.idCardNo" type="idcard" clearable></u-input>
			</u-form-item>
			<u-form-item :right-icon="rightIcon" :label-position="labelPosition" label="手机号码" prop="mobile" label-width="170">
				<u-input :border="border" placeholder="请输入手机号码" v-model="model.mobile" type="number" clearable></u-input>
			</u-form-item>
			<u-form-item :label-position="labelPosition" label="文化水平" prop="education" label-width="150">
				<u-input :border="border" type="select" :select-open="selectShow" v-model="model.education" placeholder="请选择文化水平"
				 @click="selectShow = true"></u-input>
			</u-form-item>
			<u-form-item :label-position="labelPosition" label="政治面貌" prop="partyType" label-width="150">
				<u-input :border="border" type="select" :select-open="selectShow" v-model="model.partyType" placeholder="请选择政治面貌"
				 @click="selectShow = true"></u-input>
			</u-form-item>
		</u-form>
		<u-button @click="submit">提交</u-button>

		<!-- 文化水平 -->
		<u-select mode="single-column" :default-value='defaultEducation' :list="educationList" v-model="selectShow" @confirm="selectEducationConfirm"></u-select>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				model: {
					name: '',
					idCardNo: '',
					mobile: '',
					education: '',
					partyType: '',
				},
				rules: {
					name: [{
						required: true,
						message: '请上传身份证照片',
						trigger: 'blur',
					}],
					idCardNo: [{
							required: true,
							message: '请填写身份证号码',
							trigger: ['change', 'blur']
						},
						{
							// 此为同步验证，可以直接返回true或者false，如果是异步验证，稍微不同，见下方说明
							validator: (rule, value, callback) => {
								// 调用uView自带的js验证规则，详见：https://www.uviewui.com/js/test.html
								return this.$u.test.idCard(value);
							},
							message: '请输入正确的身份证格式',
							// 触发器可以同时用blur和change，二者之间用英文逗号隔开
							trigger: ['change', 'blur'],
						},
					],
					mobile: [{
							required: true,
							message: '请填写手机号码',
							trigger: ['change', 'blur']
						},
						{
							// 此为同步验证，可以直接返回true或者false，如果是异步验证，稍微不同，见下方说明
							validator: (rule, value, callback) => {
								// 调用uView自带的js验证规则，详见：https://www.uviewui.com/js/test.html
								return this.$u.test.mobile(value);
							},
							message: '请填写正确的手机号码',
							// 触发器可以同时用blur和change，二者之间用英文逗号隔开
							trigger: ['change', 'blur'],
						},
					],
					education: [{
						required: true,
						message: '请选择文化水平',
						trigger: ['change']
					}],
					partyType: [{
						required: true,
						message: '请选择政治面貌',
						trigger: ['change']
					}]
				},
				errorType: ['message'],
				labelPosition: 'left',
				border: false,
				rightIcon: 'arrow-right',
				selectShow: false, //默认下拉关闭
				educationList: [{
					value: '1',
					label: '小学'
				}, {
					value: '2',
					label: '初中'
				}, {
					value: '3',
					label: '高中'
				}],
				defaultEducation: [0]
			};
		},
		onReady() { //开启校验方法
			this.$refs.uForm.setRules(this.rules);
		},
		methods: {
			submit() {
				this.$refs.uForm.validate(valid => {
					if (valid) {
						console.log('验证通过');
						console.log("this.model: " + JSON.stringify(this.model));
					} else {
						console.log('验证失败');
					}
				});
			},

			selectEducationConfirm(e) {
				// 选择商品类型回调
				this.model.education = '';
				e.map((val, index) => {
					this.model.education += this.model.education == '' ? val.label : '-' + val.label;
				})
			}
		}
	}
</script>

<style lang="scss">

</style>
